@model ProductDetailsModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Domain.Catalog;
@using Nop.Core.Domain.Seo;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }

}

<div class="product-page-container product-variants col-ms-12 col-xs-12 col-sm-12 col-md-12 col-lg-12">

    @Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })
    <div class="product-variants-wrapper">
        @foreach (var productVariant in Model.ProductVariantModels)
        {
            var dataDictProductImages = new ViewDataDictionary();
            dataDictProductImages.Add("productVariantId", productVariant.Id);
            dataDictProductImages.Add("addVideo", true);
            var dataDictPrice = new ViewDataDictionary();
            dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", productVariant.Id);
            var dataDictAttributes = new ViewDataDictionary();
            dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", productVariant.Id);
            var dataDictGiftCard = new ViewDataDictionary();
            dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = string.Format("giftcard_{0}", productVariant.Id);
            var dataDictAddToCart = new ViewDataDictionary();
            dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", productVariant.Id);
            var dataDictReview = new ViewDataDictionary();
            dataDictReview.Add("ShowCount", true);

            <div class="product-variant" data-id="@productVariant.Id">
                @using (Html.BeginRouteForm("Product", new { SeName = Model.SeName }, FormMethod.Post))
                {
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
                            @Html.Widget("productdetails_before_pictures")
                            <!--product pictures-->
                            @Html.Partial("_ProductDetailsPictures", Model, dataDictProductImages)
                            @Html.Widget("productdetails_after_pictures")
                        </div>
                        <div class="col-ms-12 col-xs-12 col-sm-6 col-md-7 col-lg-8">
                            <div class="product-page-info">
                                @if (!string.IsNullOrEmpty(Model.AgeClass))
                                {
                                    <div class="ageclass">@Model.AgeClass+</div>
                                }
                                <h1 class="product-name">@Model.Name</h1>
                                <div class="product-information">
                                    @if (!String.IsNullOrEmpty(productVariant.Name))
                                    {
                                        <h2 class="product-variant-name">@productVariant.Name</h2>
                                    }
                                    <div class="product-review-info">
                                        @Html.Partial("_ProductReviewInfo", Model.ProductReviewInfo, dataDictReview)
                                    </div>
                                    @Html.Partial("_ProductVariantPrice", productVariant.ProductVariantPrice, dataDictPrice)
                                    @*<span class="store-name">by @Model.ProductStore.Name</span>

                                        <div class="stock-info @productVariant.StockLevel">
                                            @productVariant.StockAvailablity
                                            <span>
                                                @*<i class="fa fa-check"></i>
                                                <i>@T.Invoke("Products.Details.AvailableQuantity")</i>
                                                    @if (Model.ProductVariantModels.Any())
                                                    {
                                                        @Model.ProductVariantModels.FirstOrDefault().StockQuantity
                                                        @productVariant.StockAvailablity
                                                    }
                                            </span>
                                        </div>*@
                                    <div class="short-description">
                                        @if (!String.IsNullOrEmpty(productVariant.Description))
                                        {
                                            @productVariant.Description
                                        }
                                        else
                                        {
                                            @Model.ShortDescription
                                        }
                                    </div>
                                </div>

                                @if (productVariant.OpenBoxProductVariants.Count > 0)
                                {
                                    <a href="javascript:void(0)" class="product-load-openbox-items" data-url="@Url.Action("LoadOpenBoxItems", "Catalog", new { area = "Commerce"})" data-name="productVariantId" data-value="@productVariant.Id">@productVariant.OpenBoxProductVariants.Count Open-Box @productVariant.ProductVariantPrice.OpenBoxPrice</a>
                                }
                                @if (Model.ProductVariantModels.Count > 1)
                                {
                                    <div class="product-variants-switch">
                                        @foreach (var pv in Model.ProductVariantModels)
                                        {
                                            // Create blocks to switch between product variants
                                            <div class="switch @if (productVariant.Id == pv.Id){<text>active</text>}" data-id="@pv.Id">
                                                <span>@pv.Name</span>
                                                <span>@pv.ProductVariantPrice.Price</span>
                                            </div>
                                        }
                                        <div class="clear"></div>
                                    </div>
                                }

                                @Html.Action("ProductTierPrices", "Catalog", new { productVariantId = productVariant.Id })
                                @Html.Partial("_ProductAttributes", productVariant.ProductVariantAttributes, dataDictAttributes)
                                @Html.Partial("_GiftCardInfo", productVariant.GiftCard, dataDictGiftCard)
                                <div class="clear"></div>
                                @Html.Partial("_ProductVariantAddToCart", productVariant.AddToCart, dataDictAddToCart)

                                @Html.Widget("productdetails_top")
                                @Html.Widget("productdetails_overview_top")
                                @Html.Partial("_ProductVariantBackInStockSubscription", productVariant)
                                @Html.Partial("_DownloadSample", productVariant)

                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                }
                <div class="open-box-items"></div>
            </div>
        }
    </div>
    <div class="product-page-details">
        <ul class="nav nav-tabs nav-justified">
            <li class="active button-white-grad"><a data-toggle="tab" href="#description-specs">@T("Products.Description")</a></li>
            <li class="button-white-grad"><a data-toggle="tab" href="#product-review">@T("Reviews.CustomerReviews") @Html.Action("ProductReviewCount", "Catalog", new { productId = Model.Id })</a></li>
            <li class="button-white-grad"><a data-toggle="tab" href="#shipping-info">Shipping & Returns</a></li>
        </ul>
        <div class="tab-content">
            <div id="description-specs" class="tab-pane fade in active">
                @if (!String.IsNullOrEmpty(Model.FullDescription))
                {
                    <div class="description">
                        @Html.Raw(Model.FullDescription)
                    </div>
                }

                @if (Model.HasSpecification)
                {
                    @T("Products.Specs")
                    @Html.Action("ProductSpecifications", "Catalog", new { productId = Model.Id })
                }
            </div>
            <div id="product-review" class="tab-pane fade in">
                @Html.Action("ProductReviewOverview", "Catalog", new { productId = Model.Id })
            </div>
            <div id="shipping-info" class="tab-pane fade in">
                @Html.Action("TopicBlock", "Topic", new { systemName = Model.ShippingReturnTopic })
            </div>

        </div>
    </div>
    <div class="product-recommend">
        @Html.Action("ProductsAlsoPurchased", "Catalog", new { productId = Model.Id })
        @Html.Action("RelatedProducts", "Catalog", new { productId = Model.Id })
    </div>

    @Html.Widget("productdetails_bottom")
</div>
@section Bottom
{
    @Html.Action("RecentlyViewedProductsBlock", "Catalog", new { area = "Commerce" })
}
<script>
    //Scrollwheel click disable
    $(".product-info-panel").on('click', function (e) {
        if (e.which == 2) {
            e.preventDefault();
        }
    });
    $(".product-variants-switch .switch").click(function () {
        var id = $(this).attr("data-id");
        if (typeof id != "undefined" && id != "") {
            $(".product-variants-wrapper .product-variant").hide();
            $(".product-variants-wrapper .product-variant[data-id=" + id + "]").show();
        }
    });
</script>